<template>
  <!-- 首页布局 -->
  <div class="common-layout">
    <el-container>
      <el-aside class="aside" style="">
        <index-aside></index-aside>
      </el-aside>

      <el-container>
        <el-header class="header">
          <!--<slot name="header"></slot>-->
          <index-header></index-header>
        </el-header>

        <el-main class="main" ref="refMain">
          <slot name="main"></slot>
        </el-main>
        <!-- 底部固钉 -->
        
        <!-- 底部 -->
        <el-footer  v-show="showMusic()" class="footer">
            <music></music>
        </el-footer>

      </el-container>
    </el-container>
  </div>
</template>

<script setup>
//
import { useRoute } from "vue-router";
import music from "../components/music.vue"; //导入音乐组件
import IndexHeader from "./IndexHeader.vue"; //导入头
import IndexAside from "./IndexAside.vue"; //导入侧边栏
const route = useRoute()

//音乐组件不会在在线视频页面展示
function showMusic(){
  if (route.name == "musicList"|| route.name =="myFavorite") {
    return true
  }else{
    return false
  }
}
 
</script>
<style  scoped>
.header {
  width: 100%;
}
.aside {
  /*等于页面高度 */
  width: 200px;
}
.main {
  width: 100%;
  padding: 10px;

}
.footer {
  width: 80%;
  position: fixed;
  right: 0px;
  bottom: 0px;
  height: auto;
  padding: 0px;
  margin-right: 20px;
  margin-bottom: 10px;
  z-index: 100;
}
.el-affix {
  width: 100% !important;
}
</style>